<template>
	<view>
		  <view class="top">
			<view class="inner"   v-for="(item,index) in topData" :key="index" @click="changeColor(index)">
				<view :class="active==index?'active':''">{{item.name}}</view>
			</view>
			<view class="orderDetail" v-for="(item,indexs) in list" >
				<!--时间-->
				<view class="time">
					<text class="icon">&#xe633; {{item.time}}</text>
					<text class="address" @click="toggle(item)">查看收货地址</text>
				</view>
				<!--商品-->
				<view  class="product">
					
				
				<!-- <view class="product" v-for="(ite,inde) in item.orderDetailList" > -->
					<view class="left" @click="toFoodDetail(ite.foodId)">
						<view>
							<image :src="ite.url"></image>
						</view>
					</view>
					<view class="right" @click="toFoodDetail(ite.foodId)">
						<view class="proname">
							<text>{{ite.foodname}}</text>
						</view>
						<view class="proprice">
							<text>单价 : {{ite.price}}</text>
						</view>
						<view class="pronumber">
							<text>数量 : {{ite.number}}</text>
						</view>
					</view>
					<!--评价-->
					<view class="comment" v-if="ite.ifcomment==0 & item.status==4">
						<view @click="confirmDialog(indexs,inde,ite)"><text>评价</text></view>
					</view>
					<view class="comment" v-if="ite.ifcomment==1 & item.status==4" >
						<view style="background-color: white;"><text>已评价</text></view>
					</view>
				<!-- </view> -->
				</view>
				<!--总价及各种按钮选项-->
				<view class="bottom">
					<view class="total"><text>合计: ¥{{item.total}}</text></view>
					<view class="other" v-if="item.status!=2 & item.status!=3" @click="deleteFoodOrder(item.foodOrderId,indexs)"><text>删除订单</text></view>
					<view class="other" v-if="item.status==1 "><text>立即支付</text></view>
					<view class="other" style="background-color: white;" v-if="item.status==2 "><text>等待发货</text></view>
					<view class="other" v-if="item.status==3" @click="changeStatus(item.foodOrderId,4,indexs)"><text>确定收货</text></view>
				</view>
			</view>
		  </view>
		  
		<!-- 提交信息 -->
		<uni-popup ref="dialogInput" type="dialog" >
			<uni-popup-dialog mode="input" title="输入评价"  placeholder="请输入评价" @confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
		<!-- 基本示例 -->
		<uni-popup ref="popup" type="center" :animation="false">
			<view class="popup-content"><text>姓名 : {{name}}</text></view>
			<view class="popup-content"><text>电话 : {{tel}}</text></view>
			<view class="popup-content"><text>地址 : {{address}}</text></view>
		</uni-popup>
		
	</view>
</template>

<script>
	import uniPopupMessage from '@/components/hgxcomponents/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/hgxcomponents/uni-popup/uni-popup-dialog.vue'
	import uniPopupShare from '@/components/hgxcomponents/uni-popup/uni-popup-share.vue'
	export default {
		components: {
			uniPopupMessage,
			uniPopupDialog,
			uniPopupShare
		},
		data() {
			return {
				topData:[
					{
						name:'全部订单',
					},
					{
						name:'待支付',
					},
					{
						name:'待发货',
					},
					{
						name:'待收货',
					},
					{
						name:'交易完成',
					}
				],
				active:0,
				//用户信息
				user:{},
				//商品详情集合
				list:[],
				//当前评价的list下标
				indexs:null,
				//当前list下的orderlist的下标
				inde:null,
				//当前评价的详情信息
				detail:{},
				//地址信息
				name:'',
				tel:'',
				address:''
				
				
			}
		},
		onLoad() {
			//获取用户信息
			const value=uni.getStorageSync("user");
			this.user=value;
			//加载信息
			this.selectDetail(0);
			
		},
		methods: {
			//更改颜色及查询该类订单详情
			changeColor(index){
				this.active=index;
				//刚好index对应数据中status
				//0位全部,1位未支付,2位未发货,3待收货,4交易完成
				this.selectDetail(index);
			},
			//查询商品详情
			selectDetail(status){
				uni.request({
					url:this.webUrl+"selectAllFoodOrderByUserId",
					data:{
						"userId":this.user.userId,
						"status":status
					},
					success: (res) => {
						this.list=res.data.list;
						console.log(this.list)
					}
				})
			},
			//删除订单
			deleteFoodOrder(foodOrderId,indexs){
				console.log(indexs);
				uni.showModal({
				    title: '提示',
				    content: '确定要删除该订单吗',
				    success: (res)=> {
				        if (res.confirm) {
							//删除数据库
				            uni.request({
				            	url:this.webUrl+"deleteFoodOrder",
				            	data:{
				            		'foodOrderId':foodOrderId
				            	},
								success: (re) => {
									uni.showToast({
										title:"删除成功"
									})
								}
				            })
							//删除当前list中的信息
							this.list.splice(indexs,1);
				        } else if (res.cancel) {
				        
						}
				    }
				});
			},
			//确定收货
			changeStatus(foodOrderId,status,indexs){
				uni.showModal({
					title:"提示",
					content:"确定收货吗",
					success: (res) => {
						if (res.confirm) {
							//删除数据库
						    uni.request({
						    	url:this.webUrl+"updateProductOrderStatus",
						    	data:{
						    		'foodOrderId':foodOrderId,
									'status':status
						    	},
								success: (re) => {
									uni.showToast({
										title:"已收货,交易完成"
									})
								}
						    })
							//改变当前list中的状态
							this.list[indexs].status=status;
							//如果是在待收货页面,则删除list中
							if(this.active==3){
								this.list.splice(indexs,1);
							}
						} else if (res.cancel) {
						
						}
					}
				})
			},
			/**
			 * 打开提交信息
			 */			
			confirmDialog(indexs,inde,ite) {
				//记录当前点击信息在data中
				this.indexs=indexs;
				this.inde=inde;
				this.detail=ite;
				this.$refs.dialogInput.open()
			},
			/**
			 * 输入对话框的确定事件
			 */
			dialogInputConfirm(done, val) {
				//数据库更新ifcomment为1
				uni.request({
					url:this.webUrl+"updateProductOrderDetailIfcomment",
					data:{
						'id':this.detail.id,
					}
				})
				uni.request({
					url:this.webUrl+"insertProductComment",
					data:{
						'proId':this.detail.proId,
						'userId':this.user.userId,
						'comment':val
					},
					success: (res) => {
						if(res.data.code=="200"){
							uni.showToast({
								title:"评价成功"
							})
						}
					}
				})
				//修改list中的ifcomment
				this.list[this.indexs].orderDetailList[this.inde].ifcomment=1;
				setTimeout(() => {
					// 关闭窗口后，恢复默认内容
					done()
				}, 1000)
			},
			//跳转到详情页
			toFoodDetail(foodId){
				uni.navigateTo({
					url:"/pages/food/foodDetail/foodDetail?foodId="+foodId
				})
			},
			/**
			 * 打开基础内容
			 */
			toggle(item) {
				this.name=item.name;
				this.tel=item.tel;
				this.address=item.address;
				this.$refs.popup.open()
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: rgb(220,220,220);
	}
	.top{
		float: left;
		width: 100%;
		height: 100rpx;
		background-color: rgb(70,70,70);
		.inner{
			float: left;
			width: 20%;
			height: 100rpx;
			color: rgb(210,210,210);
			line-height:100rpx;
			text-align: center;
			font-size: 27rpx;
		}
		.active{
			color: orange;
		}
	}
	
	.orderDetail{
		width: 100%;
		float: left;
		margin-bottom: 20rpx;
		.time{
			float: left;
			width: 100%;
			height: 60rpx;
			background-color: white;
			color: rgb(148,102,102);
			line-height: 60rpx;
			text{
				margin-left: 20rpx;
				font-size: 30rpx;
			}
			.address{
				float: right;
				margin-right: 30rpx;
				font-size: 25rpx;
			}

		}
		.product{
			float: left;
			width: 100%;
			height: 150rpx;
			background-color: white;
			margin-top: 3rpx;
			.left{
				float: left;
				width: 150rpx;
				height: 150rpx;
				text-align: center;
				line-height:120rpx;
				view{
					float:left;
					margin-top: 25rpx;
					margin-left: 16rpx;
					width: 100rpx;
					height: 100rpx;
					border: 2rpx solid rgb(220,220,220);
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
			.right{
				float: left;
				width: 450rpx;
				height: 150rpx;
				.proname{
					float: left;
					height: 50rpx;
					width: 450rpx;
					overflow: hidden;
					text{
						color: rgb(148,102,102);
						font-size: 23rpx;
					}
				}
				.proprice{
					float: left;
					height:50rpx;
					width: 450rpx;
					overflow: hidden;
					text{
						font-size:23rpx;
						color: rgb(148,102,102);
					}
				}
				.pronumber{
					float: left;
					height: 50rpx;
					width: 450rpx;
					overflow: hidden;
					text{
						font-size:23rpx;
						color: rgb(148,102,102);
					}
				}
			}
			.comment{
				float: left;
				width: 150rpx;
				height: 150rpx;
				view{
					float: left;
					margin-top: 55rpx;
					margin-left:25rpx;
					width: 100rpx;
					height: 40rpx;
					background-color: rgb(220,220,220);
					line-height: 30rpx;
					text-align: center;
					border-radius: 5rpx;
					text{
						font-size: 28rpx;
						color: rgb(148,102,102);
					}
				}
			}
		}
		.bottom{
			float: left;
			width: 100%;
			height: 70rpx;
			margin-top: 3rpx;
			background-color:white;
			.total{
				float: left;
				width: 300rpx;
				height: 70rpx;
				line-height: 70rpx;
				text{
					color:rgb(148,102,102);
					font-size: 28rpx;
					margin-left: 20rpx;
				}
			}
			.other{
				float: right;
				width: 150rpx;
				height: 40rpx;
				margin-top: 15rpx;
				line-height: 30rpx;
				text-align: center;
				background-color: rgb(220,220,220);
				margin-left: 30rpx;
				margin-right: 20rpx;
				text{
					font-size: 28rpx;
					color: rgb(148,102,102);
				}
			}
		}
	}

	.popup-content {
		background-color: rgb(31,124,255);
		border-radius: 40rpx;
		padding: 15px;
		text{
			color: white;
		}
	}

</style>
